<template>
  <div class="workflow-designer-container">
    <el-row :gutter="10" class="full-height">
      <!-- 左侧节点库和模板库 -->
      <el-col :span="4" class="sidebar">
        <el-tabs type="border-card" class="full-height">
          <el-tab-pane label="节点库">
            <NodeLibrary @drag-node="startDragNode" />
          </el-tab-pane>
          <el-tab-pane label="模板库">
            <WorkflowSaveReuse component-type="template-list" />
          </el-tab-pane>
           <el-tab-pane label="历史记录">
            <WorkflowSaveReuse component-type="history-list" />
          </el-tab-pane>
        </el-tabs>
      </el-col>

      <!-- 中间画布 -->
      <el-col :span="20" class="main-content">
        <div class="canvas-toolbar">
           <WorkflowSaveReuse component-type="save-button" />
           <WorkflowExecuteResult component-type="execute-button" />
        </div>
        <div
          class="canvas-wrapper"
          ref="canvasWrapper"
          @dragover.prevent
          @drop="onDrop"
        >
          <WorkflowCanvas ref="workflowCanvas" />
        </div>
      </el-col>
    </el-row>
     <WorkflowParamconfig />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import NodeLibrary from '../components/workflow/NodeLibrary.vue'; 
import WorkflowCanvas from '../components/workflow/WorkflowCanvas.vue';
import WorkflowParamconfig from '../components/workflow/WorkflowParamconfig.vue';
import WorkflowExecuteResult from '../components/workflow/WorkflowExecuteResult.vue';
import WorkflowSaveReuse from '../components/workflow/WorkflowSaveReuse.vue';

const workflowCanvas = ref(null);
let draggedNode = null;

const startDragNode = (node) => {
  draggedNode = node;
};

const onDrop = (event) => {
  if (draggedNode && workflowCanvas.value) {
    const canvasRect = event.currentTarget.getBoundingClientRect();
    const x = event.clientX - canvasRect.left;
    const y = event.clientY - canvasRect.top;
    
    // 调用子组件的方法
    workflowCanvas.value.addNode(draggedNode, { x, y });
  }
  draggedNode = null;
};
</script>

<style scoped>
.full-height {
  height: calc(100vh - 130px); /* 减去header和footer的高度 */
}
.sidebar, .main-content {
  height: 100%;
}
.el-tabs--border-card {
  border: none;
}
.canvas-toolbar {
  padding: 10px;
  background: #f5f7fa;
  border-bottom: 1px solid #dcdfe6;
}
.canvas-wrapper {
  height: calc(100% - 50px); /* 减去toolbar高度 */
  overflow: hidden;
  position: relative;
}
</style>